<!--  -->
<template>
  <div class="promotion">
    <div class="btn">
      <el-button type="primary" style="width: 90%; opacity: 0.5">新增项目+</el-button>
    </div>
    <div class="btn">
      <el-button type="primary" style="width: 90%; opacity: 0.5">配置筛选项</el-button>
    </div>
    <div class="infors">
      <div class="qiye">
        <h3>找到268个企业</h3>
        <span>智能排序</span>
      </div>
      <div class="comp" v-for="list in listss" :key="list.index">
        <div class="mings">{{ list.name }}</div>
        <ul class="compinfor">
          <li>
            <h3>{{ list.company }}</h3>
            <p>
              国标行业：{{ list.industry }} <br />
              注册资本：{{ list.capital }}
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      listss: [
        {
          name: '祥龙',
          company: '重庆祥龙电器股份有限公司',
          industry: '制造业',
          capital: '5678万人民币',
        },
        {
          name: '凌达',
          company: '重庆祥龙电器股份有限公司',
          industry: '制造业',
          capital: '5678万人民币',
        },
        {
          name: '龙珠',
          company: '重庆祥龙电器股份有限公司',
          industry: '制造业',
          capital: '5678万人民币',
        },
        {
          name: '巴岳',
          company: '重庆祥龙电器股份有限公司',
          industry: '制造业',
          capital: '5678万人民币',
        },
        {
          name: '祥龙',
          company: '重庆祥龙电器股份有限公司',
          industry: '制造业',
          capital: '5678万人民币',
        },
      ],
    }
  },
  created() {},
  methods: {},
  beforeDestroy() {},
}
</script>

<style lang='scss' scoped>
.promotion {
  .btn {
    width: 100%;
    height: 41px;
    text-align: center;
  }
  .btn:nth-child(1) {
    width: 100%;
    height: 41px;
    text-align: center;
    margin: 0px 0 14px;
  }
  .infors {
    width: 100%;
    .qiye {
      display: flex;
      justify-content: space-between;
      margin-top: 19px;
      margin: 0 20px;
      h3 {
        width: 50%;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #444451;
        line-height: 20px;
        span {
          display: block;
          width: 50%;
          text-align: right;
          font-family: PingFangSC, PingFangSC-Regular;
          color: #444451;
          line-height: 17px;
        }
      }
    }
    .comp {
      margin-top: 10px;
      width: 100%;
      display: flex;
      height: 80px;
      flex-grow: 1;
      border-bottom: 1px solid #e2e2e2;
      .mings {
        margin: 0 14px 0 20px;
        width: 43px;
        height: 43px;
        background: #e8f1ff;
        border-radius: 10px;
        text-align: center;
        line-height: 43px;
        opacity: 0.5;
        color: #0062ff;
      }
      .compinfor {
        width: auto;
        display: flex;
        li {
          width: 100%;
          height: auto;
          h3 {
            font-size: 16px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;

            color: #171725;
            line-height: 22px;
            letter-spacing: 0.1px;
          }
          p {
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;

            color: #92929d;
            line-height: 22px;
          }
        }
      }
    }
  }
}
</style>
